

<style lang="scss" scoped>
.entrustcurrent {
  float: left;
  width: 100%;
}

.page {
  text-align: right;
  margin-top: 20px;
}
.table {
  border-radius: 4px;
}
.table .ivu-table-wrapper {
  position: relative;
  /* border: 1px solid #dddee1; */
  border-bottom: 0;
  border-right: 0;
  // box-shadow: 0 0 2px #ccc;
  border-radius: 4px;
  // overflow: hidden;
}
.form.ivu-form-inline .ivu-form-item {
  display: inline-block;
}
</style>
<style lang="scss">
.header {
  text-align: center;
  position: relative;
  padding: 10px;
  font-size: 18px;
}
.entrustcurrent .ivu-table th,
.entrustcurrent .ivu-table td {
  text-align: center;
}
.table .ivu-table-cell-expand {
  color: #f0a70a;
}
</style>

<template>
  <div class="entrustcurrent">
    <div class="header">
      <span>交易报表</span>
      <Icon type="ios-arrow-back" size="18" style="position: absolute;left: 10px;" @click="back" />

    </div>
    <div class="table">
      <Table height="240" :columns="historyOrder.columns" :no-data-text="$t('common.nodata')" :data="historyOrder.rows"></Table>
      <div class="page">
        <!--        <Page :total="total" :pageSize="pageSize" :current="pageNo" @on-change="loadDataPage"></Page>-->
      </div>
    </div>
  </div>
</template>
<script>
var moment = require("moment");
import expandRow from "@components/exchange/expand.vue";

export default {
  components: { expandRow },
  data() {
    const self = this;
    return {
      historyOrder: {
        pageSize: 10,
        total: 10,
        page: 0,
        columns: [
          {
            title: self.$t("exchange.time"),
            key: "time",
            render: (h, params) => {
              return h("span", {}, params.row.time);
            }
          },
          // {
          //   title: self.$t("exchange.order"),
          //   key: "orders",
          //   render: (h, params) => {
          //     return h("span", {}, params.row.orders);
          //   }
          // },
          {
            title: self.$t("exchange.stockCode"),
            key: "code",
            render(h, params) {
              return h("span", params.row.code);
            }
          },
          // {
          //   title: self.$t("exchange.direction"),
          //   key: "name",
          //   render: (h, params) => {
          //     const row = params.row;
          //     const className = row.direction.toLowerCase();
          //     return h(
          //       "span",
          //       {
          //         attrs: {
          //           class: className
          //         }
          //       },
          //       row.direction == "BUY"
          //         ? self.$t("exchange.buyin")
          //         : self.$t("exchange.sellout")
          //     );
          //   }
          // },
          // {
          //   title: self.$t("exchange.stockName"),
          //   key: "name",
          //   render(h, params) {
          //     return h("span", params.row.name);
          //   }
          // },
          // {
          //   title: self.$t("exchange.cprize"),
          //   key: "cprize",
          //   render(h, params) {
          //     return h("span", params.row.current_price);
          //   }
          // },
          {
            title: self.$t("exchange.quantity"),
            key: "quantity",
            render(h, params) {
              return h("span", params.row.quantity);
            }
          },
          {
            title: self.$t("exchange.paymentamount"),
            key: "payment_amount",
            render(h, params) {
              return h("span", params.row.payment_amount);
            }
          },
          // {
          //   title: self.$t("exchange.servicefee"),
          //   key: "service_fee",
          //   render(h, params) {
          //     return h("span", params.row.service_fee);
          //   }
          // },
          {
            title: self.$t("exchange.status"),
            key: "status",
            render: (h, params) => {
              const status = params.row.status;
              if (status == 0) {
                return h(
                    "span",
                    {
                      style: {
                        color: "#f0a70a"
                      }
                    },
                    self.$t("exchange.hasing")
                );
              } else if (status == 1) {
                return h(
                    "span",
                    {
                      style: {
                        color: "red"
                      }
                    },
                    self.$t("exchange.sold")
                );
              } else {
                return h("span", {}, "--");
              }
            }
          }
        ],
        rows: []
      },
      loading: false,
      pageSize: 10,
      pageNo: 1,
      total: 10,
      symbol: [],
    };
  },
  computed:{
    lang: function() {
      return this.$store.state.lang;
    }
  },
  watch: {
    lang: function() {
      this.updateLangData();
    }
  },
  created() {
    this.getHistory();
  },
  methods: {
    back() {
      this.$router.back()
    },
    getHistory() {
      const str =this.host + `api/getBuy?token=${sessionStorage.getItem('token')}`
      this.$http.get(str).then(res => {
        const arr = res.body.data
        this.historyOrder.rows = arr.map(item => {
          item.time = this.getDate(item.time)
          return item
        })
      })
    },
    getDate(val) {
      const date = new Date(Number(val+'000'));
      const formattedDate = date.toLocaleDateString();
      return formattedDate;
    },
    dateFormat: function(tick) {
      return moment(tick).format("YYYY-MM-DD HH:mm:ss");
    },
    timeFormat: function(tick) {
      return moment(tick).format("HH:mm:ss");
    },
    loadDataPage(data) {
      this.pageNo = data;
      this.getHistoryOrder();
    },
    handleSubmit() {
      this.pageNo = 1;
      this.getHistoryOrder();
    },
    handleClear() {
      this.formItem = {
        symbol: "",
        type: "",
        direction: "",
        date: ""
      };
    },
    getHistoryOrder() {
      //查询历史委托
      this.loading = true;
      const { symbol, type, direction, date: rangeDate } = this.formItem,
          startTime = new Date(rangeDate[0]).getTime() || "",
          endTime = new Date(rangeDate[1]).getTime() || "";
      let params = {};
      if (symbol) params.symbol = symbol;
      if (direction) params.direction = direction;
      if (type) params.type = type;
      if (startTime) params.startTime = startTime;
      if (endTime) params.endTime = endTime;
      params.pageNo = this.pageNo;
      params.pageSize = this.pageSize;
      var that = this;
      this.orders = [];
      this.$http
          .post(this.host + "/exchange/order/personal/current", params)
          .then(response => {
            var resp = response.body;
            let rows = [];
            if (resp.content.length > 0) {
              this.total = resp.totalElements;
              for (var i = 0; i < resp.content.length; i++) {
                var row = resp.content[i];
                row.price =
                    row.type == "MARKET_PRICE"
                        ? that.$t("exchange.marketprice")
                        : row.price;
                rows.push(row);
              }
              this.orders = rows;
              console.log(this.orders);
            }
            this.loading = false;
          });
    },
    getSymbol() {
      this.$http.post(this.host + this.api.market.thumb, {}).then(response => {
        var resp = response.body;
        if (resp.length > 0) {
          this.symbol = resp;
        }
      });
    },
    cancel(orderId) {
      this.$Modal.confirm({
        content: this.$t("exchange.undotip"),
        onOk: () => {
          this.$http
              .post(this.host + this.api.exchange.orderCancel + "/" + orderId, {})
              .then(response => {
                var resp = response.body;
                if (resp.code == 0) {
                  this.getHistoryOrder();
                } else {
                  this.$Notice.error({
                    title: this.$t("exchange.tip"),
                    desc: resp.message
                  });
                }
              });
        }
      });
    },
    updateLangData(){
      this.columns[1].title = this.$t("exchange.time");
      this.columns[2].title = this.$t("uc.finance.trade.symbol");
      this.columns[3].title = this.$t("uc.finance.trade.type");
      this.columns[4].title = this.$t("exchange.direction");
      this.columns[5].title = this.$t("exchange.price");
      this.columns[6].title = this.$t("exchange.num");
      this.columns[7].title = this.$t("exchange.traded");
      this.columns[8].title = this.$t("uc.finance.trade.turnover");
      this.columns[9].title = this.$t("exchange.action");
    }
  }
};
</script>

